<template>
  <div class="page-content">
    <myTable
      :tableData="tableList"
      v-bind="contentConfig"
      v-model:page="pageInfo"
      :total="total"
      @selection-change="selectionChange"
    >
      <!-- 1.头部插槽 -->
      <template #header-handler>
        <el-button type="primary" v-if="Get" @click="handleAdd"
          >新建{{ contentConfig.title.replace("列表", "") }}</el-button
        >
        <el-button type="warning"
          ><el-icon><i-ep-Refresh /></el-icon
        ></el-button>
      </template>
      <!-- 2.表格列公共插槽 -->
      <!-- 状态 -->
      <template #status="scope">
        <el-switch
          v-model="scope.row.status"
          :active-value="1"
          :inactive-value="0"
        >
        </el-switch>
      </template>
      <!-- 操作 -->
      <template #operation="scope">
        <!-- 编辑 -->
        <el-button size="small" type="success" @click="handleEdit(scope.row)"
          ><el-icon><i-ep-Edit /></el-icon
        ></el-button>
        <!-- 删除 -->
        <el-button
          v-if="Del"
          size="small"
          type="danger"
          @click="handleDelete(scope.row.id)"
          ><el-icon><i-ep-Delete /></el-icon
        ></el-button>
        <!-- 分配权限 -->
        <el-button
          v-if="pageName === 'role'"
          size="small"
          type="info"
          @click="AssignPermissions(scope.row.id)"
          ><el-icon><i-ep-Tools /></el-icon
        ></el-button>
      </template>
      <!-- 2.表格列私有动态插槽 -->
      <template
        v-for="item in otherPropSlots"
        :key="item.prop"
        #[item.prop]="scope"
      >
        <slot :name="item.prop" :row="scope.row"></slot>
      </template>
    </myTable>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref, watch } from "vue"
import myTable from "@/base-ui/table"
import { ElMessage, ElMessageBox } from "element-plus"
// 引入pinia仓库
import { systemStore } from "@/stores/modules/system"
import { usePermissions } from "@/hooks/usePermission"

export default defineComponent({
  props: {
    contentConfig: {
      type: Object,
      required: true
    },
    pageName: {
      type: String,
      required: true
    }
  },
  components: {
    myTable
  },
  emits: ["addClick", "editClick", "setPermissions"],
  setup(props, { emit }) {
    const systemstore = systemStore()

    // 获取按钮权限
    const Get = usePermissions(props.pageName, "Get")
    const Add = usePermissions(props.pageName, "Add")
    const Del = usePermissions(props.pageName, "Del")
    // const Edit = usePermissions(props.pageName, "Edit")
    const Status = usePermissions(props.pageName, "Status")

    const pageInfo = ref({ per_page: 20, current_page: 1 })

    watch(pageInfo, () => {
      // console.log(pageInfo.value)
      GetPageInfo()
    })

    // 获取页面信息
    const GetPageInfo = (formData: any = {}) => {
      systemstore.getPageInfo({
        url: "/" + props.pageName,
        queryInfo: {
          per_page: pageInfo.value.per_page, // 每页的数据条数
          page: pageInfo.value.current_page, // 当前页页码
          ...formData
        }
      })
    }

    GetPageInfo()

    // 从 pinia 中获取数据
    // 表格信息
    const tableList = computed(() => systemstore.tableData(props.pageName))
    // 数据总数
    const total = computed(
      () => systemstore.getPagination(props.pageName).total
    )

    // 获取其他的动态插槽名称(组件私有插槽)
    const otherPropSlots = props.contentConfig?.propList.filter((item: any) => {
      if (item.prop === "status") return false //公共插槽
      if (item.prop === "operation") return false //公共插槽
      return true
    })

    // 新建
    const handleAdd = () => {
      emit("addClick")
    }

    // 编辑
    const handleEdit = (item: any) => {
      emit("editClick", item)
    }
    // 分配权限
    const AssignPermissions = async (id: number) => {
      emit("setPermissions", id)
    }
    // 删除
    const handleDelete = async (id: any) => {
      const confirmResult = await ElMessageBox.confirm(
        "此操作将永久删除该条信息, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true,
          draggable: true
        }
      ).catch((err: any) => err)
      // console.log(confirmResult);
      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消删除，则返回值为字符串 cancel
      if (confirmResult !== "confirm") {
        return ElMessage.info("已取消删除")
      }
      systemstore.deletePageData({
        url: "/" + props.pageName,
        id: id
      })
      console.log(id)
    }
    // 选择框回调
    const selectionChange = (value: any) => {
      console.log(value)
    }
    return {
      handleEdit,
      handleDelete,
      selectionChange,
      GetPageInfo,
      handleAdd,
      AssignPermissions,
      otherPropSlots,
      tableList,
      total,
      pageInfo,
      Get,
      Add,
      Del,
      // Edit,
      Status
    }
  }
})
</script>

<style scoped lang="less">
.page-content {
  padding: 20px;
  border-top: 20px solid #f5f5f5;
}
</style>
